import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Segmented} from "../../../../packages";
import * as React from "react";
import {SegmentedProps} from "antd";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: { name: 'month' } as any
  });

  const options: SegmentedProps['options'] = [
    { label: '年份', value: 'year' },
    { label: '月份', value: 'month' },
    { label: '日期', value: 'date' },
    { label: '星期', value: 'week' },
    { label: '季度', value: 'quarter' },
  ];

  return () => (
    <DemoRow title="基本用法">
      <Segmented options={options} v-model={state.formData.name}/>
      <span>{state.formData.name}</span>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const state = reactive({
    formData: { name: { code: 'month', id: 'month' } } as any
  });

  const options: any[] = [
    { label: '年份', value: { code: 'year', id: 'year' } },
    { label: '月份', value: { code: 'month', id: 'month' } },
    { label: '日期', value: { code: 'date', id: 'date' } },
    { label: '星期', value: { code: 'week', id: 'week' } },
    { label: '季度', value: { code: 'quarter', id: 'quarter' } },
  ];

  return () => (
    <DemoRow title="绑定对象">
      <Segmented options={options} v-model={state.formData.name}/>
      <span>{JSON.stringify(state.formData.name)}</span>
    </DemoRow>
  );
});
